<script setup lang="ts">
import { NSpin, NSkeleton, NResult, NSpace, NCard } from "naive-ui";
import {
  defineProps,
  ref,
  watch,
  toRef,
  defineEmits,
  onMounted,
  onUnmounted,
  computed,
} from "vue";
import { useI18n } from "vue-i18n";
import { MessageSchema } from "@/plugins/i18n/i18n";
import * as lodash from "lodash-es";
import { useUICommonHandler } from "@/ys-ts/naive-ui";
import { getLogger } from "@/ys-ts/log";

// 定义 Logger
const logger = getLogger("page.home");

// IProps 定义的常用代码
interface IPorps {
  param: string;
}
const props = defineProps<IPorps>();
const param = toRef(props, "param");

// 事件
const emit = defineEmits<{
  (e: "update:param", param: number): void;
}>();

// 钩子
onMounted(() => {
  return;
});
onUnmounted(() => {
  return;
});

// ref
const test = ref<string>("");
const test2 = toRef(props, "param");

// watch
watch(test, () => {
  return;
});
computed(() => {});

// loading 逻辑
const { loading, delayLoadingClose } = useUICommonHandler();

// i18n 翻译
const { t } = useI18n<{ messages: MessageSchema }>();

// loadsh 的引入
lodash.random();
</script>

<template>
  <div>
    <!--    通过NSpace 实现居中-->
    <NSpace vertical justify="center" class="tw-h-full">
      <NSpace justify="center"></NSpace>
    </NSpace>
    <!-- 无边框 NCard     -->
    <NCard content-style="padding:0"> </NCard>

    <!-- 不用控制内部宽度的一种居中 -->
    <div class="tw-flex tw-justify-center tw-w-full"></div>
  </div>
</template>

<style scoped></style>
